export const addCaseCard = (editor) => {
  const { Components,BlockManager } = editor;

  // 此组件为案例卡片组件，双击图片可以更改图片，点击text可以修改说明文字
  // 需要横向排列可以设置样式的float为left或right
  Components.addType('CaseCard', {
    model: {
      defaults: {
        name: 'CaseCard',
        droppable: false,
        attributes: { class: 'case-card' },
        components: [
          {
            type: 'div',
            attributes: { class: 'case-card-wrapper' },
            components: [
              {
                type: 'image',
                // 当拖动图片时，会通过.case-card-image类来更改样式，
                // 但是没有设置class时，会使用随机生成的id来进行属性选择器修改宽高
                attributes: {
                  src: 'https://cdn4.codesign.qq.com/prototypes/2023/08/03/xDP3923q32qn08ZwlKp03/apgsmrtqzvfi3x3v/64200cfe52f6862c161ffd5c17463692.jpg',
                },
              },
              {
                type: 'text',
                attributes: { class: 'case-card-description' },
                content: '汇报动画 | 万科工程装配式建筑设计阶段技术认定汇报',
              },
            ],
          },
        ],
        // script() {
        //   // const el = this;
        //   // const wrapperId = el.attributes.id.value;
        //   // const wrapperEl = document.getElementById(wrapperId);
        //   // const imgEl = wrapperEl.querySelector('img');
        //   // // 进行对image动态添加class类，这样组件的attributes就抓取不到此类名，
        //   // // 也就会使用随机生成的id来进行属性选择器修改宽高
        //   // // 但是在上传图片后，其样式会消失
        //   // if (imgEl) {
        //   //   imgEl.classList.add('case-card-image')
        //   //   // imgEl.setAttribute('style', 'max-width:100%;margin-bottom:10px');
        //   // }
        // },
        styles: `
          .case-card-wrapper {
            display: flex;
            flex-direction: column;
            align-items: center;
            border: 1px solid #e9e9e9;
            margin: 10px;
            width: 350px;
          }
          .case-card-wrapper img {
            width: 100%;
            margin-bottom: 10px;
          }
          .case-card-description {
            text-align: center;
          }
        `,
      },
    },
  });
  BlockManager.add("CaseCard", {
    label: "案例卡片",
    category: "首页组件",
    select: true,
    media:`<svg t="1720768327577" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15366" width="30" height="30"><path d="M860.2 159.3H729.7c-19.8-94.7-121.3-95-204.8-95s-185.1 0.3-204.8 95h-154c-28.9 0-52.4 23.5-52.4 52.4v695.5c0 28.9 23.5 52.4 52.4 52.4h694.1c28.9 0 52.4-23.5 52.4-52.4V211.7c-0.1-28.9-23.5-52.4-52.4-52.4z m-481 35.5c0-59.2 31-67.6 145.7-67.6s145.7 8.4 145.7 67.6v31.4H379.2v-31.4z m470.5 701.9H176.6V222.2h139.8V289h417.1v-66.9h116.2v674.6z" p-id="15367"></path><path d="M289.7 402.7c-17.4 0-31.4 14.1-31.4 31.4s14.1 31.4 31.4 31.4h471.5c17.4 0 31.4-14.1 31.4-31.4s-14.1-31.4-31.4-31.4H289.7zM642.9 556.3H289.7c-17.4 0-31.4 14.1-31.4 31.4s14.1 31.4 31.4 31.4h353.2c17.4 0 31.4-14.1 31.4-31.4s-14.1-31.4-31.4-31.4zM524.9 724H289.7c-17.4 0-31.4 14.1-31.4 31.4s14.1 31.4 31.4 31.4h235.2c17.4 0 31.4-14.1 31.4-31.4s-14-31.4-31.4-31.4z" p-id="15368"></path></svg>`,
    content: { type: "CaseCard" },
  });
};
